<template>
  <div class="app-container">
    <el-card>
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px" size="small">
        <el-form-item label="分类：" prop="dictIndusTmplCate">
          <el-select style="width: 500px" v-model="addForm.dictIndusTmplCate" placeholder="请选择">
            <el-option v-for="item in cateOptions" :key="item.value" :label="item.label"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="名称：" prop="name">
          <el-input style="width: 500px" v-model="addForm.name" maxlength="30" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="发布平台：" prop="platformType">
          <el-checkbox-group v-model="addForm.platformType">
            <el-checkbox v-for="city in platformTypeList" :label="city.dictValue" :key="city.dictValue">{{
              city.dictLabel }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="上传模板：" prop="fileUrl">
          <div style="display: flex">
            <UploadFile @uploadFileSucces="uploadFileSucces" v-model="addForm.fileUrl"></UploadFile>
            <div style="margin-left: 10px" class="el-upload__tip">
              上传的模版可以包含docx、pdf、xlsx
            </div>
          </div>
        </el-form-item>
        <el-form-item label="封面图片：" prop="previewUrl">
          <single-upload @uploadSucces="uploadSucces" uploadType="2" v-model="addForm.previewUrl" :width="'220px'"
            :height="'140px'" :border="'1px solid #ccc'">
            <div class="" style="line-height: 140px; margin-top: 8px" v-if="!addForm.previewUrl">
              <i style="font-size: 40px; color: #ccc; font-weight: bold" class="el-icon-plus"></i>
            </div>
          </single-upload>
        </el-form-item>
        <el-form-item>
          <el-button v-debounce :disabled="isDetail" type="primary" @click="submitForm('addForm')">提交</el-button>
          <el-button @click="resetForm('addForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { addTemplate, editTemplate, getTemplate } from "@/api/tool";
export default {
  components: {
    UploadFile: () => import("@/components/Upload/uploadFile"),
    SingleUpload: () => import("@/components/Upload/uploadOne"),
  },
  data() {
    return {
      addForm: {
        dictIndusTmplCate: "",
        name: "",
        platformType: ['2'],
        // fileUrl: [{name: "4Ek0vzDotG6x4acF-P5DF (1).pdf", url: "https://julimeng-dev.oss-cn-hangzhou.aliyuncs.com/managehub/default/20241204/4Ek0vzDotG6x4acF-P5DF (1).pdf"}],
        fileUrl: [],
        previewUrl: "",
      },
      cateOptions: [],
      addRules: {
        dictIndusTmplCate: [
          { required: true, message: "请选择分类", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        platformType: [
          { required: true, message: "请选择发布平台", trigger: "blur" },
        ],
        fileUrl: [{ required: true, message: "请上传模板", trigger: "blur" }],
        previewUrl: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
      },
      platformTypeList: [],
      isDetail: false
    };
  },
  async created() {
    this.cateOptions = await this.$getDictData("indus_tmpl_cate");
    this.platformTypeList = await this.$getDictData("platform_type");
    if (this.$route.query.id) {
      this.$route.meta.title = "编辑模板";
      this.getInfo();
    }
    if (this.$route.query.id && this.$route.query.type == 'detail') {
      this.$route.meta.title = "查看模板";
      this.getInfo();
      this.isDetail = true
    }
  },
  methods: {
    getInfo() {
      getTemplate(this.$route.query.id).then((res) => {
        let params = {
          dictIndusTmplCate: res.data.dictIndusTmplCate,
          name: res.data.name,
          platformType: res.data.platformType.split(","),

          fileUrl: [{ name: res.data.filename, url: res.data.fileUrl }],
          previewUrl: res.data.previewUrl,
          id: res.data.id,
        };
        this.addForm = Object.assign({}, params);
      });
    },
    resetForm(form) {
      this.$router.go(-1);
    },
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          let params = {
            dictIndusTmplCate: this.addForm.dictIndusTmplCate,
            name: this.addForm.name,
            platformType: this.addForm.platformType.join(","),
            fileUrl: this.addForm.fileUrl[0].url,
            filename: this.addForm.fileUrl[0].name,
            previewUrl: this.addForm.previewUrl,
          };
          if (this.addForm.id) {
            params.id = this.addForm.id;
            editTemplate(params).then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.$router.go(-1);
            });
          } else {
            addTemplate(params).then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.$router.go(-1);
            });
          }
        }
      });
    },
    uploadFileSucces() {
      this.$refs.addForm.validateField("fileUrl");
    },
    uploadSucces() {
      this.$refs.addForm.validateField("previewUrl");
    },
  },
};
</script>

<style></style>
